<script setup lang="ts">
import { ref } from 'vue'

// 定义模板接口
interface Template {
  id: string;
  name: string;
  image: string;
  techStack: string[];
  description: string;
  details?: {
    features: string[];
    screens: string[];
  }
}

// 定义属性
const props = defineProps<{
  template: Template;
}>()

// 定义事件
const emit = defineEmits(['close', 'create'])

// 当前预览图片索引
const currentScreenIndex = ref(0)

// 下一张预览图
const nextScreen = () => {
  if (props.template.details && currentScreenIndex.value < props.template.details.screens.length - 1) {
    currentScreenIndex.value++
  }
}

// 上一张预览图
const prevScreen = () => {
  if (currentScreenIndex.value > 0) {
    currentScreenIndex.value--
  }
}

// 处理创建项目
const handleCreate = () => {
  emit('create', props.template)
  console.log('创建项目')
}

// 处理关闭弹窗
const handleClose = () => {
  emit('close')
  console.log('关闭弹窗')
}
</script>

<template>
  <div class="overlay">
    <div class="modal">
      <!-- 顶部标题栏 -->
      <div class="modal-header">
        <h2>{{ props.template.name }}</h2>
        <button class="close-btn" @click="handleClose">×</button>
      </div>
      
      <!-- 内容区域 -->
      <div class="modal-content">
        <!-- 左侧 -->
        <div class="left-panel">
          <!-- 预览图片轮播 -->
          <div class="preview-image">
            <img 
              v-if="props.template.details && props.template.details.screens && props.template.details.screens.length > 0" 
              :src="props.template.details.screens[currentScreenIndex]" 
              :alt="`预览图 ${currentScreenIndex + 1}`" 
            />
            <img v-else :src="props.template.image" alt="预览图" />
            
            <!-- 轮播导航按钮 -->
            <div 
              v-if="props.template.details && props.template.details.screens && props.template.details.screens.length > 1" 
              class="preview-nav"
            >
              <button 
                class="nav-btn prev" 
                @click="prevScreen" 
                :disabled="currentScreenIndex === 0"
              >
                ◀
              </button>
              <div class="preview-indicators">
                <span 
                  v-for="(_, index) in props.template.details.screens" 
                  :key="index" 
                  :class="['indicator', index === currentScreenIndex ? 'active' : '']"
                  @click="currentScreenIndex = index"
                ></span>
              </div>
              <button 
                class="nav-btn next" 
                @click="nextScreen" 
                :disabled="currentScreenIndex >= props.template.details.screens.length - 1"
              >
                ▶
              </button>
            </div>
          </div>
          
          <div class="tech-tags">
            <span v-for="(tech, index) in props.template.techStack" :key="index" class="tag">
              {{ tech }}
            </span>
          </div>
        </div>
        
        <!-- 右侧 -->
        <div class="right-panel">
          <div class="description">
            <h3>描述</h3>
            <p>{{ props.template.description }}</p>
          </div>
          
          <div v-if="props.template.details && props.template.details.features" class="features">
            <h3>主要功能</h3>
            <ul>
              <li v-for="(feature, index) in props.template.details.features" :key="index">
                {{ feature }}
              </li>
            </ul>
          </div>
          
          <div class="code-preview">
            <h3>代码预览</h3>
            <div class="code-block">
              <pre><code>// {{ props.template.name }} 示例代码
import { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // 获取数据
    fetch('/api/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div className="app">
      <h1>{{ props.template.name }}</h1>
      {/* 内容区域 */}
    </div>
  );
}</code></pre>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 底部按钮区域 -->
      <div class="modal-footer">
        <button class="create-btn" @click="handleCreate">创建项目</button>
        <button class="cancel-btn" @click="handleClose">取消</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  border-radius: 8px;
  max-width: 900px;
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-header {
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 1.8rem;
  cursor: pointer;
  color: #666;
  line-height: 1;
}

.modal-content {
  display: flex;
  overflow: auto;
  padding: 1.5rem;
  gap: 2rem;
}

@media (max-width: 768px) {
  .modal-content {
    flex-direction: column;
  }
}

.left-panel {
  flex: 1;
  min-width: 0;
}

.right-panel {
  flex: 1;
  min-width: 0;
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.tag {
  background-color: #e6f7ff;
  color: #1890ff;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.preview-image {
  margin-bottom: 1.5rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
}

.preview-image img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.preview-nav {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.5rem;
  border-radius: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.nav-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  border-radius: 50%;
  padding: 0;
}

.nav-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
}

.nav-btn:not(:disabled):hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.preview-indicators {
  display: flex;
  gap: 0.4rem;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

.indicator.active {
  background-color: #4a6cf7;
}

.description h3,
.features h3,
.code-preview h3 {
  margin-top: 0;
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
  color: #333;
}

.description p {
  margin-top: 0;
  margin-bottom: 1.5rem;
  line-height: 1.6;
  color: #555;
}

.features ul {
  margin-top: 0;
  padding-left: 1.5rem;
}

.features li {
  margin-bottom: 0.5rem;
  color: #555;
}

.code-block {
  background-color: #f5f7f9;
  padding: 1rem;
  border-radius: 6px;
  overflow: auto;
  max-height: 200px;
  font-family: 'Fira Code', Consolas, Monaco, monospace;
  margin-top: 0.5rem;
}

.code-block pre {
  margin: 0;
}

.code-block code {
  font-size: 0.85rem;
  color: #333;
  line-height: 1.5;
}

.modal-footer {
  padding: 1.5rem;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  background-color: #f9f9f9;
}

.create-btn {
  background-color: #4a6cf7;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  min-width: 120px;
  transition: background-color 0.2s;
}

.create-btn:hover {
  background-color: #3a5ce5;
}

.cancel-btn {
  background-color: #f1f3f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 0.8rem 1.5rem;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cancel-btn:hover {
  background-color: #e1e4e8;
}
</style> 